﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <title>cdp测试用例</title>
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="./assets/css/index.css"/>
</head>
<body>
<!--头部-->
<div class="header">
    CDP2022数据分布图
    <a href="javascript:;" class="a-access">
        <button class="button type1">
    		cdp
    	</button>
    </a>
</div>
<!--主体-->
<div class="main clearfix">
    <div class="main-left">
        <div class="border-container">
            <div class="name-title">CDP2022各城市客服人数</div>
            <div id="radar"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">2022KFS员工人数分布</div>
            <div id="graduateyear"></div>
            <ul class="three-pie clearfix">
                <li>
                    <div>
                        <div style="color: azure; margin: 15px 5px 5px 30px;">联系我们：</div>
                        <div style="color: azure; margin: 20px 5px 5px 15px;">qq：333333333</div>
                        <div style="color: azure; margin: 15px 5px 5px 15px;">微信：Ddddddddd</div>
                        <div style="color: azure; margin: 15px 5px 5px 15px;">电话：1254154144</div>
                        <div style="color: azure; margin: 15px 5px 5px 15px;">座机：080016</div>
                        <div style="color: azure; margin: 15px 5px 5px 15px;">邮箱：30280064@qq.com</div>
                    </div>
                </li>
                <li>
                    <div>
                        <div style="color: azure; margin: 15px 5px 5px 40px;">工作地点：</div>
                        <div style="color: azure; margin: 15px 5px 5px 40px;">天津、北京</div>
                        <div style="color: azure; margin: 15px 5px 5px 40px;">上海、杭州</div>
                        <div style="color: azure; margin: 15px 5px 5px 40px;">重庆、廊坊</div>
                        <div style="color: azure; margin: 15px 5px 5px 40px;">大连、哈尔滨</div>

                    </div>
                </li>
            </ul>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
    <div class="main-middle">
        <div class="border-container">
            <div id="mapadd"></div>
            <div class="number-show">
                <ul>
                    <li>
                        <span class="span-number-show">八大城市</span>
                    </li>
                    <li>
                        <span class="span-name">天津、北京</span>
                    </li>
                    <li>
                        <span class="span-name">上海、杭州</span>
                    </li>
                    <li>
                        <span class="span-name">重庆、廊坊</span>
                    </li>
                    <li>
                        <span class="span-name">大连、哈尔滨</span>
                    </li>
                </ul>
            </div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <ul class="teacher-pie clearfix">
                <li>
                    <div class="name-title">第一季度工单数量</div>
                    <div id="courserate"></div>
                </li>
                <li>
                    <div class="name-title">第二季度工单数量</div>
                    <div id="professionrate"></div>
                </li>
            </ul>

            <div class="name-title">2022天津工单趋势</div>
            <div id="changedetail"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
    <div class="main-right">
        <div class="border-container">
            <div class="name-title">2022SLA</div>
           <table class="table table-kingdargen">
               <thead>
                   <tr>
                       <th>城市</th>
                       <th>第一季度</th>
                       <th>第二季度</th>
                       <th>第三季度</th>
                       <th>第四季度</th>
                   </tr>
               </thead>
               <tbody>
                   <tr>
                       <td>天津</td>
                       <td>99.50%</td>
                       <td>99.70%</td>
                       <td>99.20%</td>
                       <td>99.50%</td>
                   </tr>
                   <tr>
                       <td>北京</td>
                       <td>99.00%</td>
                       <td>98.00%</td>
                       <td>99.80%</td>
                       <td>99.00%</td>
                   </tr>
                   <tr>
                       <td>廊坊</td>
                       <td>98.00%</td>
                       <td>98.00%</td>
                       <td>99.00%</td>
                       <td>99.20%</td>
                   </tr>
                   <tr>
                       <td>上海</td>
                       <td>99.60%</td>
                       <td>99.60%</td>
                       <td>99.60%</td>
                       <td>99.70%</td>
                   </tr>
                   <tr>
                       <td>杭州</td>
                       <td>99.90%</td>
                       <td>99.90%</td>
                       <td>99.90%</td>
                       <td>99.95%</td>
                   </tr>
                   <tr>
                       <td>重庆</td>
                       <td>99.75%</td>
                       <td>99.00%</td>
                       <td>99.00%</td>
                       <td>99.00%</td>
                   </tr>
                   <tr>
                       <td>大连</td>
                       <td>99.00%</td>
                       <td>99.00%</td>
                       <td>99.00%</td>
                       <td>99.00%</td>
                   </tr>
                   <tr>
                       <td>哈尔滨</td>
                       <td>99.50%</td>
                       <td>99.50%</td>
                       <td>98.90%</td>
                       <td>99.00%</td>
                   </tr>
               </tbody>
           </table>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">2022工单数量趋势1</div>
          <div id="juniorservice"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
        <div class="border-container">
            <div class="name-title">2022工单数量趋势2</div>
            <div id="edubalance"></div>
            <span class="top-left border-span"></span>
            <span class="top-right border-span"></span>
            <span class="bottom-left border-span"></span>
            <span class="bottom-right border-span"></span>
        </div>
    </div>
</div>
 
	
</body>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/echarts.min.js"></script>
<script src="./assets/js/index.js"></script>
<script src="./assets/js/map/shandong.js"></script>
<script src="./assets/js/map/china.js"></script>
</html>